<template>
	<view class="label">
		<view class="label-box">
			<view class="label-box-header">
				<view class="label-title">我的</view>
				<view class="label-edit" @click="edit">{{isEdit ?"完成":"编辑"}}</view>
			</view>
			<uni-load-more v-if="loading" status="loading" type="snow"></uni-load-more>
			<view v-if="!loading" class="label-box-content">
				<view v-for="(item,index) in mylist" class="label-box-content_item" :key="item._id" >{{item.name}}
					<uni-icons class="icons-close" type="clear" size="20" color="red" v-if='isEdit' @click="toList(index)"></uni-icons>
				</view>
				<view class="no-data" v-if="mylist.length===0">没有数据</view>
			</view>
		</view>
		<view class="label-box">
			<view class="label-box-header">
				<view class="label-title">标签推荐</view>
			</view>
			<uni-load-more v-if="loading" status="loading" type="snow"></uni-load-more>
			<view v-if="!loading" class="label-box-content">
				<view v-for="(item,index) in list" @click="toMylabel(index)" class="label-box-content_item" :key='item._id'>{{item.name}}</view>
				<view class="no-data" v-if="list.length===0">没有数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getLabel()
		},
		data() {
			return {
				isEdit:false,
				mylist:[],
				list:[],
				loading:false
			}
		},
		methods: {
			edit(){
				if(this.isEdit){
					this.updateLabel(this.mylist)
				}
				this.isEdit = !this.isEdit
			},
			updateLabel(label){
				
				let newArrIds = []
				label.forEach(item=>{
					newArrIds.push(item._id)
				})
				console.log(newArrIds)
				this.$api.update_label({
					label:newArrIds
				}).then((res)=>{
					console.log(res)
					uni.$emit('labelChange','uni-app')
				}).catch((e) => {
					console.log(e)
				});
			},
			getLabel(){
				this.loading = true
				this.$api.get_label({
					type: 'all'
				}).then((res) => {
					const {
						data
					} = res;
					// data.unshift({
					// 	name:"全部"
					// })
					this.loading = false
					this.mylist = data.filter(item=>item.current)
					this.list = data.filter(item=>!item.current)
				}).catch(()=>{
					this.loading = false
				})
			},
			toMylabel(index){
				if(!this.isEdit)return
				this.mylist.push(this.list[index])
				this.list.splice(index,1)
			},
			toList(index){
				this.list.push(this.mylist[index])
				this.mylist.splice(index,1)
			}
		}
	}
</script>
.
<style lang="scss">
	.page {
		background-color: #f5f5f5;
	}
	.label{
		.label-box{
			background-color: #fff;
			margin-bottom: 10px;
			.label-box-header{
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				font-size: 15px;
				padding: 10px 15px;
				border-bottom: 1px #f5f5f5 solid;
				.label-edit{
					color:#4CD964;
					font-weight: bold;
				}
			}
			.label-box-content{
				display: flex;
				flex-wrap: wrap;
				padding: 15px;
				padding-top: 0;
				.label-box-content_item{
					// width: 50px;
					border: #666 1px solid;
					border-radius: 5px;
					display: flex;
					justify-content: center;
					margin-top: 12px;
					margin-right: 10px;
					padding: 2px 5px;
					position: relative;
					.icons-close{
						position: absolute;
						right: -8px;
						top: -8px;
						background-color: #fff;
						border-radius: 50%;
					}
					
				}
			}
		}
	}
	.no-data{
		width: 100%;
		text-align: center;
		padding: 50px 0;
		color: #999;
	}
</style>
